<template>
	<view class="container">
		<userInfo></userInfo>
		<view class="title">非共同生活法定赡养、抚养、义务人情况</view>
		<view class="topOptionsTitle">家庭分组</view>
		<view class="topOptionsBox">
			<view class="topOptions" @click="chooseUser(index)" :class="chooseUserIndex == index?'chooseUser':''" v-for="(item,index) in list" :key="index">{{item.username?item.username:'姓名'}}</view>
			<view class="topOptions topOptionsButton" @click="addUser">
				+
			</view>
		</view>
		<block  v-for="(item,index) in list" v-if="chooseUserIndex == index" :key="index">
			<view class="options">
				<view class="optionsLeft">家庭年总收入</view>
				<input type="digit" placeholder-class="empty" @input="checkInput($event,index)" v-if="!isOpen" v-model="item.annualSupport" class="optionsRight" placeholder="请填写家庭年总收入(元)"/>
				<view class="optionsRight" :class="!item.annualSupport?'empty':''" v-else>
					{{item.annualSupport?item.annualSupport:'请填写家庭年总收入(元)'}}
				</view>
			</view>
			<view class="options">
				<view class="optionsLeft">家庭人均收入</view>
				<input type="digit" placeholder-class="empty" @input="checkInput($event,index)" v-if="!isOpen" v-model="item.annualSupport" class="optionsRight" placeholder="请填写年家庭人均收入(元)"/>
				<view class="optionsRight" :class="!item.annualSupport?'empty':''" v-else>
					{{item.annualSupport?item.annualSupport:'请填写年家庭人均收入(元)'}}
				</view>
			</view>
			<view class="options">
				<view class="optionsLeft">年赡（抚、扶）养费</view>
				<input type="digit" placeholder-class="empty" @input="checkInput($event,index)" v-if="!isOpen" v-model="item.annualSupport" class="optionsRight" placeholder="请填写年赡养费(元)"/>
				<view class="optionsRight" :class="!item.annualSupport?'empty':''" v-else>
					{{item.annualSupport?item.annualSupport:'请填写年赡养费(元)'}}
				</view>
			</view>
		</block>
		<view class="topOptionsTitle">家庭成员</view>
		<view class="topOptionsBox">
			<view class="topOptions" @click="chooseUser(index)" :class="chooseUserIndex == index?'chooseUser':''" v-for="(item,index) in list" :key="index">{{item.username?item.username:'姓名'}}</view>
			<view class="topOptions topOptionsButton" @click="addUser">
				+
			</view>
		</view>
		
		<view v-for="(item,index) in list" v-if="chooseUserIndex == index" :key="index">
			<view class="delBox">
				<view class="">
					
				</view>
				<view class="del" @click="delUser(item,index)">
					删除
				</view>
			</view>
			<picker mode="selector" range-key="dictLabel" :value="item.relationship" :range="jiatingguanxi" @change="selectChange('jiatingguanxi',index,$event)">
			<view class="options">
				<view class="optionsLeft">与申请人关系</view>
				<view class="optionsRight">
					<view class="personNum">{{jiatingguanxiObj[item.relationship+'']}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<view class="options">
				<view class="optionsLeft">姓名</view>
				<input type="text" placeholder-class="empty" v-if="!isOpen" v-model="item.username" class="optionsRight" placeholder="请填写姓名"/>
				<view class="optionsRight" :class="!item.username?'empty':''" v-else>
					{{item.username?item.username:'请填写姓名'}}
				</view>
			</view>
			<picker mode="selector" range-key="name" :value="item.whetherToSupport" :range="youwufuyangnengli" @change="selectChange1('youwufuyangnengli',index,$event)">
				<view class="options">
					<view class="optionsLeft">有无赡（抚、扶）养能力</view>
					<view class="optionsRight">
						<view class="personNum">{{youwufuyangnengli[item.whetherToSupport].name}}</view>
						<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
					</view>
				</view>
			</picker>
			<view class="bottomOptions" v-if="item.whetherToSupport == 0">
				<view class="bottomTitle">无赡（抚、扶）养能力原因</view>
				<view class="bottomOptionsBox">
					<view class="bottomOptionsBoxIn" @click="chooseBaoxian(indexIn,index)" v-for="(itemIn,indexIn) in wufuyangnengliyuanyin" :key="indexIn">
						<image class="chooseIcon" v-if="(item.reasonsForInabilityToSupport/1) === indexIn" src="/static/kancha/choose.png"></image>
						<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
						<view class="bottomOptionsTitle">{{itemIn.name}}</view>
					</view>
				</view>
			</view>
			<view class="options">
				<view class="optionsLeft">身份证号</view>
				<input type="text" :maxlength="18" placeholder-class="empty" v-if="!isOpen" v-model="item.identityNumber" class="optionsRight" placeholder="请填写身份证号"/>
				<view class="optionsRight" :class="!item.identityNumber?'empty':''" v-else>
					{{item.identityNumber?item.identityNumber:'请填写身份证号'}}
				</view>
			</view>
			<view class="options">
				<view class="optionsLeft">家庭住址</view>
				<input type="text" placeholder-class="empty" v-if="!isOpen" v-model="item.homeAddress" class="optionsRight" placeholder="请填写家庭住址"/>
				<view class="optionsRight" :class="!item.homeAddress?'empty':''" v-else>
					{{item.homeAddress?item.homeAddress:'请填写家庭住址'}}
				</view>
			</view>
			<!-- <view class="options">
				<view class="optionsLeft">年赡（抚、扶）养费</view>
				<input type="digit" placeholder-class="empty" @input="checkInput($event,index)" v-if="!isOpen" v-model="item.annualSupport" class="optionsRight" placeholder="请填写年赡养费(元)"/>
				<view class="optionsRight" :class="!item.annualSupport?'empty':''" v-else>
					{{item.annualSupport?item.annualSupport:'请填写年赡养费(元)'}}
				</view>
			</view> -->
		</view>
		<view class="button" v-if="isSave == '0'" @click="save(true)">
			下一步
		</view>
		<view class="zhenchayuan">侦查员——{{user.nickName?user.nickName:user.userName}}</view>
		<view class="bottom"></view>
		<otherList @openChange="isOpenChange"/>
	</view>
</template>

<script>
	import otherList from '@/pages/components/otherInfoList.vue'
	import userInfo from '@/pages/components/userInfo.vue'
	let outData = {
		chooseUserIndex:0,
		isOpen:true
	}
	let info = {
		"id": "",
		"guaranteeNumber": "",
		"relationship": 1,
		"username": "",
		"whetherToSupport": 0,
		"reasonsForInabilityToSupport": 1,
		"identityNumber": "",
		"homeAddress": "",
		"annualSupport": 0
	}
	export default {
		components:{
			otherList,userInfo
		},
		data(){
			return Object.assign(outData,JSON.parse(JSON.stringify(this.dataObject)),{
				list:[],
				user:{},
				isOpen:false,
				jiatingguanxi:[],
				jiatingguanxiObj:{},
				wufuyangnengliyuanyin: [{
						name: '低收入',
						isCheck: true
					},{
						name: '支出贫困',
						isCheck: false
					}
				],
				isSave:'1',
				pageInfo:{
					pageName:'非共同生活成员情况',
					pagePath:'/pages/kancha/notFamilyMemberInfo',
					pageIndex:2
				}
			})
		},
		onLoad() {
			this.isSave = uni.getStorageSync('isSave')
			this.user = uni.getStorageSync('user')
			this.getDetail()
		},
		methods: {
			checkInput(e,index) {
				setTimeout(() => {
					let list = JSON.parse(JSON.stringify(this.list))
					list[index].annualSupport = this.$verifyMoney(e.detail.value);
					this.list = list
				}, 0)
			},
			// 表单验证
			verifyData(){
				let arr = this.list
				let length = arr.length
				for(let i=0;i<length;i++){
					// 验证姓名
					if(this.$verifyEmpty(arr[i].username)){
						return {
							title:'请填写第 '+(i+1)+' 名非同住人姓名信息',
							status:false
						}
					}
					// 验证身份证号
					if(!this.$verifyIdCard(arr[i].identityNumber)){
						return {
							title:'第 '+(i+1)+' 名非同住人身份证号不正确',
							status:false
						}
					}
					// 验证居住地址
					if(this.$verifyEmpty(arr[i].homeAddress)){
						return {
							title:'第 '+(i+1)+' 名非同住人住址不能为空',
							status:false
						}
					}
					// 验证赡养费
					if(this.$verifyEmpty(arr[i].annualSupport)){
						return {
							title:'第 '+(i+1)+' 名非同住人赡养费不能为空',
							status:false
						}
					}
				}
				return {
					title:'验证通过',
					status:true
				}
			},
			async getDetail(){
				let that = this
				uni.showLoading({
					title:'请稍等...'
				})
				let memberInfoList = await this.$get('/app/bus/indexRelevant?guaranteeNumber='+uni.getStorageSync('guaranteeNumber'),{}) 
				if(memberInfoList.code == 200){
					console.log(memberInfoList)
					this.list = memberInfoList.data
					// if(memberInfoList.data.length == 0){
					// 	this.list = [{...info}]
					// } else {
					// 	this.list = memberInfoList.data
					// }
					// this.list.forEach((item,index)=>{
						
					// })
				}
				// 获取家庭关系数组
				let jiatingguanxiArr = await this.$get('/app/bus/dictType?dictType=family_relationships_status',{})
				if(jiatingguanxiArr.code == 200){
					this.jiatingguanxi = jiatingguanxiArr.data
					this.jiatingguanxi.forEach(item=>{
						this.jiatingguanxiObj[item.dictValue]=item.dictLabel
					})
				}
				uni.hideLoading()
			},
			async save(isLink,isChangeOpen){
				if(isChangeOpen&&this.list.length == 0){
					return
				}
				if(this.list.length == 0){
					this.link()
					return
				}
				let result = this.verifyData()
				if(isLink){
					if(!result.status){
						uni.showModal({
							content: result.title,
							showCancel: false,
							confirmText: '确定'
						});
						return
					}
				}
				uni.showLoading({
					title:'请稍等...'
				})
				let res = await this.$post('/app/bus/saveRelevant',JSON.stringify(this.list),false)
				uni.hideLoading()
				if(res.code == 200){
					console.log(isLink)
					let pageStatus = uni.getStorageSync('pageStatus')
					if(result.status){
						pageStatus.notFamilyMemberInfo = {
							...this.pageInfo,
							status:true
						}
					} else {
						pageStatus.notFamilyMemberInfo = {
							...this.pageInfo,
							status:false
						}
					}
					uni.setStorageSync('pageStatus',pageStatus)
					if(isLink){
						this.link()
					} else {
						// uni.showToast({
						// 	title: '信息修改成功',
						// 	duration:2000
						// });
					}
				}
			},
			// 基本信息开关
			isOpenChange(e){
				this.isOpen = e
				if(e){
					this.save(false,true)
				}
			},
			link() {
				uni.redirectTo({
					url: '/pages/kancha/familyGetMoneyInfo'
				})
			},
			selectChange(e,index,str){
				// 家庭关系
				if(e == 'jiatingguanxi'){
					this.list[index].relationship = this[e][str.detail.value].dictValue/1
				}
			},
			selectChange1(e,index,str){
				this.list[index].whetherToSupport = str.detail.value
			},
			chooseBaoxian(indexIn,index){
				this.list[index].reasonsForInabilityToSupport = indexIn
			},
			chooseUser(index){
				console.log(index)
				this.chooseUserIndex = index
			},
			addUser(){
				let _info = {...info}
				_info.guaranteeNumber = uni.getStorageSync('guaranteeNumber');
				this.list.push(Object.assign(JSON.parse(JSON.stringify(_info)),JSON.parse(JSON.stringify(this.dataObject))))
			},
			async delUser(item,index){
				uni.showModal({
					content: '确认要要删除本条记录吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async res => {
						if(res.confirm){
							if(item.id){
								let resIn = await this.$get('/app/bus/delRelevant?id='+item.id,{})
								console.log(resIn)
								if(resIn.code == 200){
									this.list.splice(index,1)
									if(this.chooseUserIndex!=0){
										this.chooseUserIndex--
									}
								} else {
									uni.showToast({
										title: '删除失败',
										icon:'none',
										duration:2000
										
									});
								}
							} else {
								this.list.splice(index,1)
								if(this.chooseUserIndex!=0){
									this.chooseUserIndex--
								}
							}
						}
						
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>
<style>
	page {
		background: white;
	}
</style>
<style scoped>
	.topOptionsTitle{
		font-size: 36rpx;
		font-weight: 700;
		padding: 40rpx;
	}
	.delBox{
		display: flex;
		justify-content: space-between;
		padding:0 40rpx;
	}
	.del{
		width: 100rpx;
		line-height: 60rpx;
		text-align: center;
		color: white;
		background-color: #fa5444;
		border-radius: 5rpx;
	}
	.empty{
		color: #ccc;
	}
	.topOptionsBox{
		display: flex;
		flex-wrap: wrap;
		width: 680rpx;
		margin-top: 20rpx;
		border-top:1rpx solid #ccc;
		margin: 0 auto;
	}
	.topOptions{
		line-height: 90rpx;
		color: #ccc;
		font-size: 26rpx;
		font-size: 32rpx;
		font-weight: 700;
		margin-right: 30rpx;
		border-top:1rpx solid transparent;
	}
	.topOptionsButton{
		background-color: white;
		font-size: 40rpx;
		width: 80rpx;
		text-align: center;
	}
	.chooseUser{
		border-top:1rpx solid #f75443;
		color:#333;
	}
	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #fa5245;
		line-height: 1;
		text-align: center;
		padding-bottom: 20rpx;
		padding-top: 50rpx;
	}

	.options {
		width: 670rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ccc;
		display: flex;
		align-items: center;
		height: 86rpx;
		padding: 0 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.optionsLeft {
		font-size: 30rpx;
		color: #ccc;
	}

	.optionsBottomTitle {
		font-size: 30rpx;
		color: #ccc;
	}

	.optionsRight {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		text-align: right;
	}

	.optionsBottomBottom {
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.position {
		max-width: 360rpx;
	}

	.positionIcon {
		width: 27rpx;
		height: 38rpx;
		margin-left: 25rpx;
	}

	.sanjia {
		width: 23rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}

	.kongge {
		width: 20rpx;
	}

	.optionsBottomBox {
		width: 670rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ccc;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.line {
		height: 26rpx;
		background: #f7f7f7;
		margin-top: 30rpx;
	}

	.uploadFile {
		width: 184rpx;
		height: 143rpx;
		margin: 0 auto;
		margin-top: 10rpx;
	}

	.wordBox {
		padding: 20rpx 80rpx;
	}

	.wordBox text {
		color: #fa5245;
	}

	.wordOptions {
		font-size: 22rpx;
		color: #ccc;
	}

	.bottomOptions {
		width: 670rpx;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 6rpx;
	}

	.bottomTitle {
		color: #ccc;
	}

	.bottomOptionsBox {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.bottomOptionsBoxIn {
		width: 290rpx;
		display: flex;
		align-items: center;
		height: 45rpx;
	}

	.chooseIcon {
		width: 28rpx;
		height: 27rpx;
	}

	.bottomOptionsTitle {
		margin-left: 28rpx;
	}

	.button1{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:#656668;
		font-size:28rpx;
		color:white;
	}
	.button{
		width:570rpx;
		line-height:84rpx;
		text-align:center;
		margin:0 auto;
		margin-top:50rpx;
		border-radius:6rpx;
		background:linear-gradient(90deg,#fa5444,#ff988f);
		font-size:28rpx;
		color:white;
		
	}
	.zhenchayuan{
		font-size: 24rpx;
		color:#ccc;
		margin-top: 20rpx;
		text-align: center;
	}
	.bottom{
		height:160rpx;
	}
	.topTitleBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		height: 90rpx;
	}
	.listTiteBox {
		position: relative;
	}
	
	.listTitleBackground {
		height: 16rpx;
		width: 120rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background: linear-gradient(-90deg, #ffd356, #ffffff)
	}
	.listTitle{
		font-size:38rpx;
		position: relative;
	}
	.right {
		width: 34rpx;
		height: 34rpx;
		position: relative;
		transition: all 0.3s;
	}
	.childrenBox{
		width: 600rpx;
		margin: 0 auto;
		height: 0;
		position: relative;
		transition: all 0.3s;
		overflow: hidden;
	}
	.childrenOptionsBox{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.childrenOptionsTitle{
		font-size: 26rpx;
		line-height: 30rpx;
		color: #ccc;
	}
	.childrenOptionsDes{
		font-size: 26rpx;
		line-height: 30rpx;
		width: 450rpx;
		text-align: right;
	}
	.rightOpen{
		transform: rotate(90deg);
	}
	.line1{
		height: 20rpx;
		background-color: #efefef;
	}
	.otherInfo{
		width: 200rpx;
		line-height:70rpx;
		text-align: center;
		font-size: 24rpx;
		color:white;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #3b3b3b;
		position: fixed;
		right: 0;
		top:460rpx;
		font-family: '黑体';
	}
</style>
